<script setup lang="ts">
import DirComponents from './components/DirComponents.vue';
// 0.文档自定义指令： https://cn.vuejs.org/guide/reusability/custom-directives
// 1.单个组件中注册指令
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el: HTMLElement) => el.focus(),
};

// 2.全局注册指令见main.ts

// 3.指令有自己的钩子，钩子函数的参数详细见文档
// 主要使用到的钩子是 mounted 和 updated
const vMyDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode) {
    // console.log(el, binding, vnode);
    console.log(binding, 'binding');
    // binding 参数会是一个这样的对象：
    // {
    //   arg: 'foo',
    //   modifiers: { bar: true },
    //   value: '1111',
    //   oldValue: /* 上一次更新时 `baz` 的值 */
    // }
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode) {},
};

// 4. 简化形式(见main.ts)-- 因为主要使用到的钩子是 mounted 和 updated
// 5. 对象字面量(见main.ts)
// 如果你的指令需要多个值，你可以向它传递一个 JavaScript 对象字面量。
// 别忘了，指令也可以接收任何合法的 JavaScript 表达式

// 6. 在组件上使用
// 不推荐在组件上使用自定义指令。当组件具有多个根节点时可能会出现预期外的行为。

const baz = '1111';
const color = 'red';
const forChild = 'child';

const vChild = {
  mounted(el, binding) {
    console.log(el, 'el-child');
  },
};
</script>

<template>
  <ul>
    <li>
      <input v-focus />
    </li>
    <li>
      <!-- 3.指令有自己的钩子 -->
      <!-- <div v-my-directive></div> -->
      <div v-my-directive:foo.bar="baz"></div>
    </li>
    <!-- 4.简化形式(全局注册) -->
    <li>
      4.简化形式：
      <div v-color="color">11111</div>
    </li>
    <li>
      5.对象字面量：
      <div v-demo="{ color: 'orange', text: 'hello!' }"></div>
    </li>
    <li>
      6. 在组件上使用
      <DirComponents v-child="forChild" />
    </li>
  </ul>
</template>
